<html>

<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta id="qyMobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no" servergenerated="true">
    <meta name="format-detection" content="telephone=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link rel="icon" type="image/ico" href="">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <link rel="stylesheet" href="css/7192css/main_new.css"/>
    <link rel="stylesheet" href="css/7192css/all.css"/>

    <link rel="stylesheet" type="text/css" href="css/fonts/font-awesome.css" />
     <link rel="stylesheet" href="css/swiper-3.4.0.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/jquery.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-weight: 300;
            font-family: 'Microsoft Yahei', Tahoma, Helvetica, Arial, sans-serif;
            transform-origin: center;
        }

        .page {
            position: relative;
            overflow: hidden;
            
        }

        .elm {
            position: absolute;
            overflow: hidden;
            width: 320px;
            animation-fill-mode: both;
            margin-top: 24px;
        }

        .page .elm:first-child{
            margin-top: 0;
        }

        .elm img {
            width: 100%;
            height: 100%;
        }

        .elm .text {
            line-height: 2.2;
            padding: .3em 15px;
            margin: 0;
            width: 100%;
            height: 100%;
            word-wrap: break-word;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="side_rt">
        <ul>
            <li onclick="window.location.href='http://api.map.baidu.com/marker?location=36.713427,119.123094&title=位置导航&content=鸢飞大酒店&output=html'"><div class="side_bg side_bgdh"></div><span class="side_span">地图</span></li>
            <li onclick="show_iframe('iframe://wp.7192.com/words_347.html?cmuid=909727')" style="margin-top:20px;"><div class="side_bg side_bgdh"></div><span class="side_span">留言</span></li>
            <li id="side_zan_icon" onclick="show_side(this)"><div class="side_bg side_bgdh"></div><span class="side_span">点赞</span></li>
            <li id="video_side" style=""><div class="side_bg side_bgdh"></div><span class="side_span">视频</span></li>
        </ul>
        <div id="side_move" class="side_move"></div>
    </div>
    <div id="side_like">
        <div class="side_Close" onclick="side_like()">关闭</div>
        <img data-local='' class="butter1" src="images/7192images/butter1.png">
        <img class="butter2" src="images/7192images/butter2.png">
        <img class="butter3" src="images/7192images/butter3.png">
        <img class="butter4" src="images/7192images/butter4.png">
        <img class="butter5" src="images/7192images/butter5.png">
        <img class="butter6" src="images/7192images/butter1.png">
        <img class="butter7" src="images/7192images/butter2.png">
        <img class="butter8" src="images/7192images/butter3.png">
        <img class="butter9" src="images/7192images/butter4.png">
        <img class="butter10" src="images/7192images/butter5.png">
        <div class="side_font" align="center">您是第<label style="color:#C50440;" id="side_like_d"></label>位<br>见证我们牵手的人</div>
    </div>

    <p class="zan_style_01 browse_l"><span>2127</span></p>
    <!-- 点赞 -->
    <p id="zan_icon" class="zan_style_01 zan_icon_p zan_style_06" onclick="show_add(this)"><i class="zan_heart"></i><span></span><b class="addone">+1</b><b class="removeone">-1</b></p>
    <div id="zan_style_02"></div>
    <!-- 点赞 -->
    <div class="u-note-error u-note"></div>
    <div class="u-note-sucess u-note"></div>
    <div class="p-index main phoneBox phonebox-edit" id="con" >
        <div class="top"></div>
        <div class="phone_menubar"></div>
        <div class="scene_title_baner" style="z">
            <div class="scene_title"></div>
        </div>
        <div class="nr" id="nr">
            <div id="audio_btn" class="off">
                <div id="yinfu"></div>
                <audio loop="" src="" id="media" autoplay="" preload></audio>
            </div>
            <div id="video_btn" style=""></div>
            <div id="loading" class="loading" style="display:none">
              <div class="loadbox">
                <div class="loadlogo"></div>
                <div class="loadbg"></div>
              </div>
            </div>
            <section class="modal-wp swiper-container" align="center" border="0" cellpadding="0" cellspacing="0" class="modal-wp" data-module=""  style="" data-bgcolor="Body BG" width="100%">
                <div class="swiper-wrapper" >
                    
                </div>     
            </section>
      <!-- Intro -->
        </div>
        <div class="bottom"></div>
        <div id="video_show_iframe" style="display:none">
            <div id="video_iframe_area"><iframe height=100% width=100% src="" frameborder=0 allowfullscreen></iframe></div>
            <b class="close_btn" ><span><i class="fa fa-times"></i></span></b>
        </div>
    </div>

    <div id="ad_icon">
    </div>

    <script src="js/swiper-3.4.0.jquery.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    
<script>
    const data = {!! $data->json !!}

    data.map(function (page) {
        var $page = $('<section class="page swiper-slide"></section>');
        page.map(elm => {
            var $elm = $('<div class="elm">'+elm.content+'</div>').css(elm.css)
            if (elm.animations)
                elm.animations.map(function (anim) {
                    $elm.css('animationName', anim.name)
                    $elm.css('animationDuration', anim.duration)
                    $elm.css("animationTimingFunction", anim.func)
                    $elm.css('animationDelay', anim.delay)
                    $elm.css('animationIterationCount', anim.count)
                });
            $page.append($elm)
        });
        $('.swiper-wrapper').append($page)
    })

</script>
<script>   
//页面滚动方式
    var layout={
        _init:function(){
            var _w=$(window).width();
            var _h=$(window).height();
            $(".swiper-container").width(_w).height(_h);
            console.log(_h);
        }
    }
    layout._init();     
    var mySwiper = new Swiper ('.swiper-container', {
        direction : 'vertical',
        autoplay : false,
        speed:300,
        roundLengths : true, 
        effect : 'flip',
        loop : true,
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
         }, 
        onSlideChangeEnd: function(swiper){ 
            
        } 
     })
    var mySwiper2 = new Swiper('.swiper-container2',{//子swiper
        nested:true,
    })
//     //屏幕缩放
//     function renderPage(a, b, c) {
       
//         var d, e, f = 1,
//             g = $(".swiper-container").width(),
//             h = $(".swiper-container").height();
//         imageWidth = $(".elm img").width();
//         imageHeight = $(".elm img").height();
//         g / h >= 320 / 520 ? (f = h / 520, d = (g / f - 320) / 2) : (f = g / 320, e = (h / f - 520) / 2);
       
//         if (1){
//         $("#qyMobileViewport").attr("content", "width=320, initial-scale=" + f + ", maximum-scale=" + f + ", user-scalable=no,target-densitydpi=device-dpi");
       
//         var i = 320 / g,
//             j = 520 / h,
//             k = Math.max(i, j),size=1/i;
        
//         }
//     }
// renderPage();
</script>
</body>
</html>
            